
<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>角色管理</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-tab layui-tab-brief">
      <ul class="layui-tab-title">
        <li class="layui-this">角色列表</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <div class="layui-row">
            <div class="layui-form" style="float:right;">
              <div class="layui-form-item" style="margin:0;">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-inline">
                  <input type="text" name="roleName" id="roleName" autocomplete="off" placeholder="角色名称" class="layui-input">
                </div>
                <button id="search" class="layui-btn" data-type="reload">
                  <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
              </div>
            </div>
          </div>
          <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
              <button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>
              <button class="layui-btn" data-type="del">删除</button>
            </div>
          </div>
          <table id="Pay_Mgr_Role_dataAll" lay-filter="Pay_Mgr_Role_dataAll"></table>
        </div>

      </div>
    </div>
  </div>
</div>

<script type="text/html" id="payBar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="perm">分配权限</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="layui/layui-xtree/layui-xtree.js"></script>

<script>
layui.use(['admin', 'table', 'util','form'], function() {
    var $ = layui.$
        , admin = layui.admin
        , table = layui.table
        , element = layui.element
        , view = layui.view
        ,layer =layui.layer
        , form = layui.form;

    element.render('breadcrumb', 'breadcrumb');

    //角色列表
    table.render({
        elem: '#Pay_Mgr_Role_dataAll'
        , url: layui.setter.baseUrl + '/sys/role/list' //列表接口
        , where: {
            access_token: layui.data(layui.setter.tableName).access_token
        }
        , id: 'tableReload'
        , page: true
        , cols: [[
            {type: 'checkbox', fixed: 'left'}
            , {field: 'roleId', title: '角色ID'}
            , {field: 'roleName', title: '角色名称'}
            , {field: 'edit', width: 260, title: '操作', toolbar: '#payBar'}
        ]]
        , skin: 'line'
    });

    //监听工具条
    table.on('tool(Pay_Mgr_Role_dataAll)', function (obj) {
        var data = obj.data;
        if (obj.event === 'perm') {

            location.hash = "/sys/perm/perm_save/roleId=" + data.roleId;

        } else if (obj.event === 'del') {

            layer.confirm('确认删除么', function (index) {
                admin.req({
                    url: layui.setter.baseUrl + '/sys/role/delete',
                    data: {
                        roleIds: data.roleId
                    },
                    success: function () {
                        layer.msg('删除成功', {
                            icon: 1
                        });
                        table.reload("tableReload");
                    }
                });
            });
        } else if (obj.event === 'edit') {
            var roleId = data.roleId;

            admin.req({
                type: 'get',
                url: layui.setter.baseUrl + '/sys/role/get',
                data: {
                    roleId: roleId
                },
                error: function (err) {
                    layer.alert(JSON.stringify(err.field), {
                        title: '错误提示'
                    })
                },
                success: function (res) {
                    if (res.code == 0) {

                        admin.popup({
                            title: '修改角色'
                            , area: ['400px', '260px']
                            , id: 'LAY-popup-content-edit'
                            , success: function (layero, index) {
                                view(this.id).render('sys/role/role_edit').done(function () {
                                    form.render(null, 'layuiadmin-app-form-list');
                                    var body = layer.getChildFrame('body', index);
                                    body.find('#email').val(data.email);
                                    form.val("layuiadmin-app-form-list", {

                                        "roleId": data.roleId,
                                        "roleName": data.roleName

                                    })
                                    form.render();
                                    form.on('submit(roleEdit)', function (data) {
                                        //这里可以写ajax方法提交表单
                                        $.ajax({
                                            type: "POST",
                                            url: layui.setter.baseUrl + '/sys/role/update',
                                            data: "params=" + JSON.stringify(data.field),
                                            success: function (res) {
                                                if (res.code == 0) {
                                                    layer.alert(res.msg,{title: "保存成功"},function(index){
                                                        table.reload('tableReload');
                                                        layer.closeAll();
                                                    })

                                                } else {
                                                    layer.alert(res.msg, {
                                                        title: '保存失败'
                                                    });
                                                }
                                            }
                                        });
                                        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                                    });

                                });
                            }
                        });


                    }
                }
            })


        }
    });


    // 搜索
    var $ = layui.$, active = {
        reload: function () {
            var roleName = $("#roleName").val();
            var roleId =$('#roleId').val();
            //执行重载
            table.reload('tableReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    roleId: roleId,
                    roleName: roleName,
                }
            });
        }

        , add: function (othis) {
            admin.popup({
                title: '添加角色'
                , area: ['400px', '230px']
                , id: 'LAY-popup-content-add'
                , success: function (layero, index) {
                    view(this.id).render('sys/role/role_add').done(function () {

                        form.render(null, 'layuiadmin-app-form-list');

                        //监听提交
                        form.on('submit(roleAdd)', function (data) {
                            //这里可以写ajax方法提交表单
                            $.ajax({
                                type: "POST",
                                url: layui.setter.baseUrl + '/sys/role/add',
                                data: "params=" + JSON.stringify(data.field),
                                success: function (res) {
                                    if (res.code == 0) {
                                            table.reload('tableReload');
                                            layer.close(index);
                                    } else {
                                        layer.alert(res.msg, {
                                            title: '保存失败'
                                        });
                                    }
                                }
                            });
                            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                        });
                        form.render();

                    });
                }
            });
        }

        , del: function(othis){
            var checkStatus = table.checkStatus("tableReload")
                ,data = checkStatus.data; //获得选中的数据
            if(data.length === 0) return layer.msg('请选择数据');
            console.log(data);
            layer.confirm('确定删除选中的数据吗？', function(){
                var roleIds = "";
                $.each(data, function(i, n){
                    roleIds = roleIds + "," + n.roleId;
                });
                console.log("roleIds");
                if(roleIds != "") {
                    roleIds = roleIds.substring(1);
                    admin.req({
                        url:layui.setter.baseUrl + '/sys/role/delete',
                        data: {
                            roleIds: roleIds
                        },
                        success: function(){
                            layer.msg('删除成功', {
                                icon: 1
                            });
                            table.reload("tableReload");
                        }
                    });
                }
            });
        }

    };
    $('#search').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    $('.layui-btn.layuiadmin-btn-list').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    $('.layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });

    form.render();
});
</script>